HTML5 video

HTML5 video – element języka znaczników HTML5 umożliwiający osadzanie i odtwarzanie plików wideo bez konieczności stosowania wtyczek zewnętrznych (takich jak Adobe Flash). Dzięki temu rozwiązaniu przeglądarki internetowe mogą odtwarzać multimedia natywnie, co zwiększa wydajność, bezpieczeństwo i dostępność treści.

Historia

Idea wbudowanego wsparcia dla multimediów sięga W3C i projektu WHATWG początków 2000‑tych lat. W 2008 roku Mozilla oraz Google zaproponowały pierwsze prototypy elementu <video>, które zostały przyjęte do specyfikacji HTML5 opublikowanej w 2014 roku. Od tego czasu wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge, Opera) obsługują ten element.

Składnia podstawowa

<video src="film.mp4" controls>
    Twój przeglądarka nie obsługuje elementu video.
</video>

Element <video> może zawierać atrybuty określające źródło, kontrolki, rozmiary, autoodtwarzanie i wiele innych. Jeśli przeglądarka nie obsługuje danego formatu, element może zawierać alternatywny tekst lub inny element <video> z innym źródłem.

Atrybuty

src – adres pliku wideo.
controls – wyświetla domyślne kontrolki odtwarzacza.
autoplay – włącza automatyczne odtwarzanie po załadowaniu.
muted – wycisza dźwięk (wymagane przy autoplay w niektórych przeglądarkach).
loop – powtarza wideo po zakończeniu.
poster – obraz wyświetlany przed rozpoczęciem odtwarzania.
preload – wskazuje, jak dużo danych ma być wstępnie pobrane (none, metadata, auto).
width i height – określają rozmiar obszaru odtwarzania.

Formaty i kodeki

Standardowy element <video> nie wymusza konkretnego formatu pliku, ale przeglądarki obsługują wybrane kombinacje kontenerów i kodeków:

Kontener	Kodeki wideo	Kodeki audio	Przeglądarki
MP4 (`.mp4`)	H.264 (AVC)	AAC, MP3	Chrome, Firefox, Safari, Edge, Opera
WebM (`.webm`)	VP8, VP9, AV1	Vorbis, Opus	Chrome, Firefox, Edge, Opera
Ogg (`.ogv`)	Theora	Vorbis	Firefox, Chrome, Opera

Aby zapewnić maksymalną kompatybilność, często stosuje się techniki polegające na podawaniu kilku źródeł w jednym elemencie:

<video controls>
    <source src="film.mp4" type="video/mp4">
    <source src="film.webm" type="video/webm">
    <source src="film.ogv" type="video/ogg">
    Twoja przeglądarka nie obsługuje elementu video.
</video>

Dostępność (WCAG)

Wideo powinno być dostępne dla osób z niepełnosprawnościami. Najważniejsze praktyki to:

Dodanie napisów (<track kind="subtitles">).
Zapewnienie opisów dźwiękowych (<track kind="descriptions">).
Umożliwienie sterowania odtwarzaczem przy pomocy klawiatury.
Zapewnienie alternatywnego tekstu lub transkryptu w sekcji <noscript> lub poniżej wideo.

Fallback i `<noscript>`

Jeżeli przeglądarka nie obsługuje elementu <video>, można zastosować alternatywne rozwiązania:

<video controls>
    … Źródła …
</video>
<noscript>
    <p>Twoja przeglądarka nie obsługuje wideo. Pobierz plik <a href="film.mp4">tutaj</a>.</p>
</noscript>

Interakcja z JavaScript i Canvas

Element wideo może być kontrolowany dynamicznie za pomocą API JavaScript (play(), pause(), currentTime itp.). Ponadto można go renderować na elemencie <canvas>, co umożliwia tworzenie efektów specjalnych i analizy obrazu w czasie rzeczywistym.

Bezpieczeństwo i prywatność

Wbudowany odtwarzacz HTML5 eliminuje potrzebę używania zewnętrznych wtyczek, które często były źródłem luk bezpieczeństwa. Warto jednak pamiętać o:

Ustawieniu atrybutu crossorigin w przypadku zasobów z innych domen.
Rozważeniu polityki CORS przy udostępnianiu wideo.
Użyciu nagłówków Content‑Security‑Policy chroniących przed nieautoryzowanym osadzaniem mediów.

Przykłady zastosowań

Strony edukacyjne – wykłady, tutoriale i prezentacje.
Portale informacyjne – relacje na żywo i materiały archiwalne.
Platformy e‑learningowe – interaktywne kursy z podpinaniem quizów (SCORM).
Gry przeglądarkowe – wideo jako tło lub element fabularny.

Powiązane pojęcia

HTML5, CSS3, JavaScript, WebM, MP4, Ogg, WCAG, CORS, Canvas

Bibliografia

W3C, HTML Living Standard, sekcja „The video element”.
WHATWG, HTML Standard, rozdział 4.11.7 “Video and audio”.
Mozilla Developer Network, „HTML5 – <video> element”.